<template>
    
  <div>

    <!-- 搜索 -->
    <div class="ipt-box">
     <div class="iconfont icon-zuojiantou" @click="$router.push('/recommend')"></div>
      <div class="package">
        <div class="iconfont icon-sousuo"></div>
        <input v-model="value" class="ipt" type="text" placeholder="搜索歌曲、歌手、专辑" @keyup.enter="add" />
      </div>
    </div>

    <!-- 热门标签 -->
    <div class="hot-tag" v-show="!isShow">
      <div class="hot-text">热门搜索</div>
      <ul class="content">
        <li v-for="(item,index) in hotList" :key="index" @click="setValue(item.first)">
          <a  >{{item.first}}</a>
        </li>
       
      </ul>
    </div>

    <!-- 历史记录 -->
    <div class="history" v-show="!isShow">
      <div class="item" v-for="(item,index) in valueList" :key="index">
        <div class="time iconfont icon-shijian_o"></div>
        <div class="sing-name" >{{item.name}}</div>
        <div class="del" @click="del(item.id)">X</div>
      </div>

    </div>

    <!-- 匹配页面 -->
    <div class="match" v-show="isShow">
        <ul>
            <li class="item" v-for="(item,index) in matchList.slice(0,10)" :key="index">
                <span class="iconfont icon-sousuo"></span>
                <div class="content" @click="setId(item.id)">{{item.name}}</div>
            </li>
         
        </ul>
    </div>
  </div>
</template>

<script>

import {getSearchHot,getSearch} from "../api/search"
export default {
    data(){
        return{
            value:null,
            valueList:[], // 搜索历史歌曲名
            hotList:[],  //热门歌曲列表
            matchList:[], //匹配歌曲列表
            isShow:false,
            index:1,
        }
    },
    methods:{
        add(){
            this.valueList.unshift({
                id:this.index,
                name:this.value
            });
            console.log(this.valueList);
            this.index +=1;

              // 输入搜索值时 调用接口
            getSearch({keywords:this.value}).then(data=>{
                console.log(data.result.songs);
                this.matchList = data.result.songs
            })

           
        },
        del(id){
            let index = this.valueList.findIndex(item=>item.id == id)
            this.valueList.splice(index,1)
        },
        setId(id){
        // 播放全部歌曲
        this.$emit("get-play-all-id",this.$route.query.id); //传递歌单id
        this.$emit("get-player-id",id)
      },

      // 点击热歌实现搜索
      setValue(val){
          this.value = val
      }
    },
    created(){
      //  热门搜索
       getSearchHot().then(data=>{
           console.log(data.result);
           this.hotList = data.result.hots
       })
    },
    watch:{
        value:function(){
            if(this.value){
                this.isShow = true
            }else{
                this.isShow = false
            }
          
        }
    }
};
</script>

<style lang="less">

.ipt-box {
  width: 100%;
  height: 60px;
  background-color: #fff;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
  
  display: flex;
  align-items:center;
  .icon-zuojiantou{
   
    text-align: center;
    line-height: 60px;
    margin-left: 10px;
}
  .package {
   
    display: flex;
    width: 80%;
    height: 30px;
    border-radius: 14px;
    // margin: 0 auto;
    margin-left: 10px;
    box-sizing: border-box;
    background-color: #ebecec;
    .icon-sousuo {
      height: 30px;
      width: 30px;
      text-align: center;
      line-height: 30px;
    }
    .ipt {
      width: 80%;
      height: 30px;
      padding: 0;
      border: 0;
      background-color: #ebecec;
      font-size: 14px;
    }
  }
}

.hot-tag {
  width: 100%;

  padding: 15px 10px 0px;
  box-sizing: border-box;
  .hot-text {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .content {
    list-style: none;
    display: flex;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    align-content: flex-start;
    li {
      height: 32px;
      line-height: 32px;
      margin-right: 8px;
      margin-bottom: 8px;
      padding: 0px 14px;
      box-sizing: border-box;
      border: 1px solid #333;
      border-radius: 15px;

      a {
        text-decoration: none;
        color: #817c7c;
        font-size: 14px;
      }
    }
  }
}

.history {
  width: 100%;
  height: 45px;

  .item {
      height: 45px;
      line-height: 45px;
      color: #a39d9d;
    .time {
      margin: 0px 10px;
    }
    display: flex;
    .sing-name {
      flex: 1;
      border-bottom: 1px solid #ddd;
      
    }
    .del {
      flex: 0 0 auto;
      width: 32px;
      height: 44px;
      line-height: 45px;
      border-bottom: 1px  solid #ddd;
    }
  }
}

.match{
    .item{
        height: 45px;
        display: flex;
        padding-left: 10px;
        box-sizing: border-box;
        span{
            line-height: 45px;
            margin-right: 7px;
        }
        .content{
            flex: 1;
            line-height: 45px;
            border-bottom: 1px solid #ddd;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
        }
    }
}
</style>